<template>
  <div id="app">
    <TopBottomButton
      :showButtons="showScrollButtons"
      :hideOnLogin="isLoginRoute"
    />
    <!-- 公告弹框 -->
    <announcement-dialog
      :visible="showAnnouncement"
      :title="announcementTitle"
      :content="announcementContent"
      @confirm="hideAnnouncement"
      @close="hideAnnouncement"
    />
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import TopBottomButton from "@/components/TopBottomButton";
import AnnouncementDialog from '@/components/AnnouncementDialog.vue'
import { mapState, mapActions } from 'vuex'

export default {
  name: "App",
  components: { ThemePicker,TopBottomButton,AnnouncementDialog },
  data(){
    return{
      showScrollButtons: true, // 控制是否显示滚动按钮
    }
  },
  computed: {
    isLoginRoute() {
      return this.$route.name === "Login"; // 判断当前路由是否是登录页面
    },
    ...mapState('announcement', {
      showAnnouncement: state => state.showAnnouncement,
      announcementTitle: state => state.title,
      announcementContent: state => state.content
    })
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  methods:{
    ...mapActions('announcement', ['hide']),
    hideAnnouncement() {
      this.hide()
    }
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
</style>
